<!DOCTYPE html>
<html>
<head>
	<link href='http://fonts.googleapis.com/css?family=Tauri|Anton|Archivo+Narrow' rel='stylesheet' type='text/css'>
	<link href="lcars.css" type="text/css" rel="stylesheet" />

	<script src="lcars.js"></script>
</head>
<body>
	<div class="titleContainer">
		<div class="roundLft _2357blue2"></div>
		<div class="_2357purple2" style="height:100%; width:946px">
			<div class="titleRight floatRight">Mission Watch &#8226; <span id="online" style="color:black" class="blink"> Online</span></div>
		</div>
		<div class="roundRgt _2357blue2 floatRight"></div>
	</div>

	<div class="contentContainer">
		<div class="top">
			<div id="top4" class="leftelbo "></div>
			<div id="top3" class="block50 "></div>
			<div id="top2" class="block200 "></div>
			<div id="top1" class="block300 "></div>
		</div>

		<div id="menu" class="left">
			<div id="menuItem1" class="btn btn4 _2357yellow2 btn_text_bottom btn_text_right" style="display:none" onclick="show('missionWatch')"><span>Missions</span></div>
			<div id="menuItem2" class="btn btn1 _2357yellow2 btn_text_bottom btn_text_right" style="display:none" onclick="show('objects')"><span>Objects</span></div>
			<div id="menuItem3" class="btn btn4 _2357yellow3 btn_text_bottom btn_text_right" style="display:none" onclick="show('credits')"><span>Credits</span></div>
		</div>

		<div class="main">
			<div class="content">
				<div id="standby">
					<div id="standbyGreetings">
						<div id="standby1" class="title blink" style="display:none">Standby</div>
						<div class="logos">
							<img id="standby2" src="imgs/shuttle.png" style="display:none"/>
							<img id="standby3" src="imgs/planet.png" style="display:none"/>
							<img id="standby4" src="imgs/station.png" style="display:none"/>
						</div>
						<div id="standby5" style="display:none">Mission Watch Database</div>
						<div id="standby6" style="display:none">Preparing System...</div>
					</div>

					<div id="startSequence" >
						<div>
							<div class="step" id="ssItem1" style="display:none">LCARS STARTUP SEQUENCE</div>
							<div class="statusContainer">
								<div id="ssgap1" class="gap _2357yellow1" style="display:none"></div>
								<div id="ssStatus1" class="statusText" style="display:none">Initiated</div>
							</div>
						</div>
						<div>
							<div class="step" id="ssItem2" style="display:none">Audio and Visual Interface</div>
							<div class="statusContainer">
								<div id="ssgap2" class="gap _2357purple1" style="display:none"></div>
								<div id="ssStatus2" class="statusText" style="display:none">Online</div>
							</div>
						</div>
						<div>
							<div class="step" id="ssItem3" style="display:none">User Input Pathways</div>
							<div class="statusContainer">
								<div id="ssgap3" class="gap _2357blue2" style="display:none"></div>
								<div id="ssStatus3" class="statusText" style="display:none">Online</div>
							</div>
						</div>
						<div>
							<div class="step" id="ssItem4" style="display:none">Mission Watch Data</div>
							<div class="statusContainer">
								<div id="ssgap4" class="gap _2357purple3" style="display:none"></div>
								<div id="ssStatus4" class="statusText" style="display:none">Initiated</div>
							</div>
						</div>
						<div>
							<div class="step" id="ssItem5" style="display:none">Visulization Unit</div>
							<div class="statusContainer">
								<div id="ssgap5" class="gap _2357yellow2" style="display:none"></div>
								<div id="ssStatus5" class="statusText" style="display:none">Online</div>
							</div>
						</div>
						<div>
							<div class="step" id="ssItem6" style="display:none">Security Protocol</div>
							<div class="statusContainer">
								<div id="ssgap6" class="gap _2357blue3" style="display:none"></div>
								<div id="ssStatus6" class="statusText" style="display:none">Online</div>
							</div>
						</div>
					</div>

					<div id="accessGranted" style="display:none">
						<div id="access1" class="title blink">Access Granted</div>
						<div id="access2" class="detail">Access to the Mission Watch files has been established</div>
					</div>
				</div>

				<div id="missionWatch" style="display:none; vertical-align: top;">
					<div class="menuContainer">
						<!--div class="dropdown" style="display:none">
							<select name="mb_list" id="2">
								<option value="planet">Sun and Planets</option>
								<option value="js">Jovian Satellites</option>
								<option value="ss">Saturnian Satellites</option>
								<option value="us">Uranian Satellites</option>
								<option value="ns">Neptunian Satellites</option>
								<option value="os">Other Satellites</option>
								<option value="sc">Spacecraft</option>
								<option value="dp">Dynamic Points</option>
							</select>
						</div-->
						<div class="clear"></div>
						<div class="optList">
							<div id="spacecraftsList">
							</div>
						</div>
					</div>

					<div class="dataContainer">
						<div id="targetInfo" style="width: 100%; height: 200px; overflow-y:scroll;margin-bottom: 10px;">
							<table style="width: 100%; vertical-align:top" cell-spacing="0" cell-padding="0">
								<tr>
									<td style="100px">ID</td><td style="width: 400px" id="target-id"></td>
								</tr>
								<tr>
									<td>Name</td><td id="target-name"></td>
								</tr>
								<tr>
									<td>Description</td><td id="target-desc"></td>
								</tr>
								<tr>
									<td>Launch</td><td id="target-launch"></td>
								</tr>
								<tr>
									<td>Links</td><td id="target-links"></td>
								</tr>
								<tr>
									<td>Current Position (From Sun)</td><td id="target-pos"></td>
								</tr>
							</table>
						</div>
						<div style="background-color: #cc99cc; width:100%; height: 5px; margin: 5px 0px;"></div>
						<div id="visCanvasContainer" style="width:100%; text-align: center">
							<canvas id="visCanvas" width="540px" height="400px"></canvas>
						</div>
					</div>
				</div>

				<div id="objects" style="display:none">
					Comming Soon...
				</div>

				<div id="credits" style="display:none">
					<div class="title _2357yellow1"><span>About Mission Watch</span></div>
					<p>This project is part of the <a href="https://2014.spaceappschallenge.org/about/" target="_blank">International Space Apps Chanllenge</a> weekend - 2014. We choose "Space Adventure: from the Earth to the limits of the Solar System". This project -<a href="https://2014.spaceappschallenge.org/project/mission-watch/" target="_blank">Mission Watch </a>- aims to provide an interactive and fun web interface to encourage others space adventurers to learn about current and past space missions.</p>

					<div class="clear"></div>
					<br/>
					<div class="title _2357yellow1"><span>Contributors</span></div>
					<div class="people">
						<div class="contributor">
							<div class="face" style="background-image: url('imgs/jayshead.jpg')"></div>
							<div class="info">
								<div class="name">Jay Cain</div>
								<div class="title">Software Engineer</div>
								<div class="job">Architecture, Data Protocols</div>
								<div class="social">
									<a href="https://www.linkedin.com/in/jaycain" target="_blank"><img src="imgs/linkedin.png"></a>
									<a href="https://plus.google.com/+JayCain/posts" target="_blank"><img src="imgs/google.png"></a>
									<a href="http://audeamus.info" target="_blank"><img src="imgs/rss.png"></a>
								</div>
							</div>
						</div>

						<div class="contributor">
							<div class="face" style="background-image: url('imgs/nisreenshead.jpg')"></div>
							<div class="info">
								<div class="name">Nisreen Cain</div>
								<div class="title">Software Engineer</div>
								<div class="job">User Interface</div>
								<div class="social">
									<a href="http://www.linkedin.com/in/nisreencain/" target="_blank"><img src="imgs/linkedin.png"></a>
									<a href="https://plus.google.com/+NisreenCain/posts" target="_blank"><img src="imgs/google.png"></a>
									<a href="http://blog.audeamus.info" target="_blank"><img src="imgs/rss.png"></a>
									<a href="https://twitter.com/nisreencain" target="_blank"><img src="imgs/twitter.png"></a>
								</div>
							</div>
						</div>
						
						<div class="contributor">
							<div class="face" style="background-image: url('imgs/ericshead.jpg')"></div>
							<div class="info">
								<div class="name">Eric Collins</div>
								<div class="title">Assistant Professor</div>
								<div class="job">Data Visulization</div>
								<div class="social">
									<a href="https://www.linkedin.com/in/collinsem" target="_blank"><img src="imgs/linkedin.png"></a>
									<a href="https://plus.google.com/115520703796077717338/posts" target="_blank"><img src="imgs/google.png"></a>
								</div>
							</div>
						</div>

						<div class="contributor">
							<div class="face" style="background-image: url('imgs/kateshead.jpg')"></div>
							<div class="info">
								<div class="name">Katelyn Collins</div>
								<div class="title">Student</div>
								<div class="job">Data Gathering</div>
							</div>
						</div>
					</div>

					<div class="clear"></div>
					<br/>
					<div class="title _2357yellow1"><span>Resources</span></div>

					<ul>
						<li><a href="https://2013.spaceappschallenge.org/project/python-jpl-horizon-ephemeris-api/" target="_blank">Python JPL Horizon (Internation Space Apps Chanllenge 2013)</a></li>
						<li><a href="http://www.javascriptkit.com/script/script2/stardates.shtml" target="_blank">Stardate Calculation (Javascriptkit)</a></li>
						<li><a href="http://www.lcars47.com/p/lcars-101.html" target="_blank">LCARS Theme Direction (LCARS47)</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>

	<div class="clear"></div>

	<div id="footer" class="titleContainer" style="position:fixed; bottom:0px;">
		<div class="roundLft _2357blue2"></div>
		<div class="_2357purple2" style="height:100%; width:946px">
			<div class="titleLeft floatLeft" id="stardate"></div>
			<script>
				stardate();
			</script>
		</div>
		<div class="roundRgt _2357blue2"></div>
	</div>
</body>
</html>